<!DOCTYPE html>
<html>
<head>
	<title>慕课网-发现</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- 兼容移动设备 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<!-- 让IE的文档渲染模式永远都是最新的 -->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
	<meta http-equiv="Expires" content="0" />
	<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/discovery.css">
	<link rel="stylesheet" type="text/css" href="css/footer.css">
	<style>
.menu .item a,.download,.shop-cart,.login a,.login{
	color: #9ca0a4;
}
.menu .item a:hover{
	color: #fff;
}
.menu .item a.menu-item-select{
	color: #fff;
}
.search-area{
	border-bottom: 1px solid #6a7076;
}
.search-input{
	color: #fff;
}
</style>
</head>
<body>
	<!-- header菜单栏 -->
	<div class="header header-black">
		<a class="home" href="index.html" title="慕课网">
			<img src="img/logo_black.png" alt="">
		</a>
		<ul class="menu">
			<li class="item"><a href="freecourse.html">免费课程</a></li>
			<li class="item"><a href="careerpath.html">职业路径</a></li>
			<li class="item"><a href="shizhan.html">实战</a></li>
			<li class="item"><a href="ask.html">猿问</a></li>
			<li class="item"><a href="discovery.html" class=" menu-item-select">发现</a></li>
		</ul>
		<div class="search-area">
			<input class="search-input" type="text">
			<div class="search-btn"><i class="icon icon-search">&#xe63d;</i></div>
		</div>
		<ul class="header-unlogin clearfix">
			<li class="download">
				<a href="#">下载APP</a>
				<div class="download-detail">
					<img src="img/appload.png" height='100%' alt="">
					<div class="load-wenzi">
						<p class="title">扫描下载慕课网APP</p>
						<p class="ios"><i class="icon">&#xe616;</i>App Store下载</p>
						<p class="android"><i class="icon">&#xe640;</i>Android下载</p>
					</div>
				</div>
			</li>
			<li class="shop-cart">
				<a href="#" class="dark">
					<i class="icon icon-cart">&#xe61d;</i>
					<span>购物车</span>
					<div class="shop-cart-detail">
						<p class="title"><object><a href="#" class="to-my-cart">我的购物车</a></object><span class="already">已加入0门课程</span></p>
						<div class="content">
							<span><i class="icon">&#xe61d;</i></span>
							<p>购物车空空如也</p>
							<span></span>
							<p>快去这里选购你中意的课程</p>
							<object><a href="#">实战课程</a></object>
							<object><a href="#">职业路径</a></object>
						</div>
						<p class="about-order"><object><a href="">我的订单中心</a></object><span>去购物车</span></p>
					</div>
				</a>
			</li>
			<li class="login">
				<a href="#">登录</a>
				/
				<a href="#">注册</a>
			</li>
		</ul>
	</div>
	
	<!-- 主要内容：三部分 -->
	<div class="content">
		<div class="content-wrap clearfix">
			<div class="left l">
				<a href="" class="left-select"><span>动态</span><i class="icon">&#xe623;</i></a>
				<a href=""><span>分享</span></a>
				<a href=""><span>职场</span></a>
				<a href=""><span>前沿</span></a>
				<a href=""><span>话题</span></a>
			</div>
			<div class="mid l">
				<div class="mid-banner">
					<div class="swiper-wrapper">
			            <div class="swiper-slide" data-swiper-autoplay="3000" style="background-image:url(img/mid-banner1.jpg);background-size: 100% 100%">
			            	<div class="banner-title">前端跳槽面试那些事</div>
			            </div>
			            <div class="swiper-slide" data-swiper-autoplay="3000" style="background-image:url(img/mid-banner2.jpg);background-size: 100% 100%"><div class="banner-title">前端跳槽面试那些事</div></div>
			            <div class="swiper-slide" data-swiper-autoplay="3000" style="background-image:url(img/mid-banner3.jpg);background-size: 100% 100%"><div class="banner-title">前端跳槽面试那些事</div></div>
			        </div>
			        <!-- Add Pagination -->
			        
			        <div class="swiper-pagination swiper-pagination-white"></div>
			      	
				</div>

				<!-- 手记列表 -->
				<div class="shouji-list">
					<div class="shouji">
						<a href="" class="shouji_author"><img src="img/shoouji_img.jpg" alt=""></a>
						<div class="shouji-content">
							<p><span class="author">MTbaby</span>发表了手记<span class="date">59分钟前</span></p>
							<div class="shouji-main-content">
								<img src="img/shouji_img1.jpg" alt="">
								<div class="main-content-wenzi">
									<p>python爬虫实践——零基础快速入门（二）爬取豆瓣电影</p>
									<p>爬虫又称为网页蜘蛛，是一种程序或脚本。 但重点在于，它能够按照一定的规则，自动获取网页信息。 爬虫的基本原理——通用框架 1.挑选aaaa</p>
									<p><span>前沿</span><span>Python</span><span>浏览 329</span></p>
								</div>
								<p class="comment"><a href=""><i class="icon">&#xe626;</i></a><span>10</span>
								   <a href=""><i class="icon">&#xe64c;</i></a><span>99</span>
								   <a href=""><i class="icon">&#xe62e;</i></a><span>21</span></p>
							</div>
						</div>
					</div>
					<div class="shouji">
						<a href="" class="shouji_author"><img src="img/shoouji_img.jpg" alt=""></a>
						<div class="shouji-content">
							<p><span class="author">MTbaby</span>发表了手记<span class="date">59分钟前</span></p>
							<div class="shouji-main-content">
								<img src="img/shouji_img1.jpg" alt="">
								<div class="main-content-wenzi">
									<p>python爬虫实践——零基础快速入门（二）爬取豆瓣电影</p>
									<p>爬虫又称为网页蜘蛛，是一种程序或脚本。 但重点在于，它能够按照一定的规则，自动获取网页信息。 爬虫的基本原理——通用框架 1.挑选aaaa</p>
									<p><span>前沿</span><span>Python</span><span>浏览 329</span></p>
								</div>
								<p class="comment"><a href=""><i class="icon">&#xe626;</i></a><span>10</span>
								   <a href=""><i class="icon">&#xe64c;</i></a><span>99</span>
								   <a href=""><i class="icon">&#xe62e;</i></a><span>21</span></p>
							</div>
						</div>
					</div>
					<div class="shouji">
						<a href="" class="shouji_author"><img src="img/shoouji_img.jpg" alt=""></a>
						<div class="shouji-content">
							<p><span class="author">MTbaby</span>发表了手记<span class="date">59分钟前</span></p>
							<div class="shouji-main-content">
								<img src="img/shouji_img1.jpg" alt="">
								<div class="main-content-wenzi">
									<p>python爬虫实践——零基础快速入门（二）爬取豆瓣电影</p>
									<p>爬虫又称为网页蜘蛛，是一种程序或脚本。 但重点在于，它能够按照一定的规则，自动获取网页信息。 爬虫的基本原理——通用框架 1.挑选aaaa</p>
									<p><span>前沿</span><span>Python</span><span>浏览 329</span></p>
								</div>
								<p class="comment"><a href=""><i class="icon">&#xe626;</i></a><span>10</span>
								   <a href=""><i class="icon">&#xe64c;</i></a><span>99</span>
								   <a href=""><i class="icon">&#xe62e;</i></a><span>21</span></p>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="right r">
				<div class="right-unlogin">
					<h4>学习发现，发现自我</h4>
					<div class="right-btns">
						<a href="">发手记</a>
						<div class="shu"></div>
						<a href="">发动态</a>
					</div>
					
				</div>
				<div class="tuijian">
					<p class="tuijian-title">
						<span>推荐任务</span><span>换一换<i class="icon">&#xe636;</i></span>
					</p>
					<div class="avators clearfix">
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person mr20">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
						<div class="person">
							<img src="img/star1.jpg" alt="">
							<p>老卫</p>
							<p style="color: #93999f;">全栈工程师</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- footer -->
	<div class="footer footer-black">
		<div class="footer-wrap">
			<div class="blog">
				<div class="mr22 chat">
					
				</div>
			</div>
			<div class="footer-links links-white">
				<a href="#">企业合作</a>
				<a href="#">人才招聘</a>
				<a href="#">联系我们</a>
				<a href="#">讲师招聘</a>
				<a href="#">常见问题</a>
				<a href="#">意见反馈</a>
				<a href="#">慕课大学</a>
				<a href="#">友情链接</a>
			</div>
			<p>© 2018 imooc.com  京ICP备 13046642号-2</p>
		</div>
	</div>
	<!-- 侧边栏 -->
	<div class="info">
		<div class="info-wrap">
			<div class="info-block b"><i class="icon">&#xe61e;</i></div>
			<div class="info-block b"><i class="icon">&#xe619;</i></div>
			<div class="info-block b"><i class="icon">&#xe61a;</i>
		
			</div>
			<div class="info-block"><i class="icon">&#xe62b;</i>
				
			</div>
		</div>
		
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
<script>
var swiper = new Swiper('.mid-banner', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    effect: 'slide',
    loop:true,
});
</script>
</html>